<template>
  <div class="menu-content step-list">
    <div class="right-title" style="display: flex;justify-content: space-between;">
      <div>抽取步骤清单</div>
      <div>
        <w-button class="oneTouch" v-if="tableData.length==1" type="primary" @click="oneTouch">一键生成</w-button>
        <a style="color: #144FEC;font-size: 14px;" @click="goBack">返回上一级</a>
      </div>
    </div>
    <div style="text-align: left;margin-top: 15px;"></div>
    <div class="content">
      <div class="table">
        <w-table :max-height="tableHeight" border :data="tableData" @cell-click="editable">
          <w-table-column prop="stepNo" label="步骤">
          </w-table-column>
          <w-table-column prop="stepName" label="步骤描述">
            <template slot-scope="{row,$index}">
              <div class="input-box" v-if="showStepName[$index]">
                <w-input size="small" @change="!row.add&&changeName(row)" v-model="row.stepName"></w-input>
              </div>
              <span v-if="!showStepName[$index]">{{row.stepName}}</span>
            </template>
          </w-table-column>
          <w-table-column prop="operateTime" label="更新日期">
          </w-table-column>
          <w-table-column prop="sort" label="排序">
            <template slot-scope="scope">
              <a class="up" v-if="!scope.row.add" @click="() => moveNode(scope,'up')">
                <img src="../../static/img/up.png" />
              </a>
              <a class="down" v-if="!scope.row.add" @click="() => moveNode(scope,'down')">
                <img src="../../static/img/down.png" />
              </a>
            </template>
          </w-table-column>
          <!-- <w-table-column prop="detail" label="详细">
            <template slot-scope="scope">
              <a v-if="!scope.row.add" class="detail-column" @click="detailStep(scope.row)">详细</a>
            </template>
          </w-table-column> -->
          <w-table-column prop="operator" label="操作">
            <template slot-scope="{row,$index}">
              <a title="详情" v-if="!row.add" class="detail" @click="detailStep(row)"><i class="w-icon-list"></i></a>
              <a title="删除" v-if="!row.add" class="reduce" @click="reduce(row)"><i class="w-icon-delete"></i></a>
              <a title="添加" v-if="row.add" class="add" @click="add(row)"><i class="w-icon-plus"></i></a>
            </template>
          </w-table-column>
        </w-table>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        procId: this.$route.query.procId,
        name: this.$route.query.name,
        showStepName: [],
        showOperateTime: [],
        tableData: [],
        tableHeight: document.documentElement.clientHeight - 200,
      };
    },
    mounted() {

    },
    watch: {

    },
    created() {
      this.getStepData()
    },
    methods: {
      //一键生成
      oneTouch() {
        this.$Http
          .get("etlProdStepInfo/batchAddStep/" + this.procId + "/" + this.name)
          .then(response => {
            if (response.data.response.code == "1") {
              this.$message.success('生成成功~')
              this.getStepData()
            } else {
              if (response.data.response.msg) {
                this.$message.error(response.data.response.msg)
              }
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      goBack() {
        this.$router.go(-1)
      },
      //点击详细跳转到环节页面
      detailStep(row) {
        this.$router.push({
          name: 'stepManage',
          query: {
            procId: this.procId,
            name: this.name,
            stepId: row.id,
            stepName: row.stepName,
            stepNo: row.stepNo,
          }
        });
      },
      //获取步骤表格数据
      getStepData() {
        let param = {
          procId: this.procId
        }
        this.$Http
          .post("etlProdStepInfo/findetlProcedureStepInfo", param)
          .then(response => {
            if (response.data.response.code == "1") {
              let content = response.data.response.data;
              this.tableData = content
              this.tableData.push({
                id: '',
                stepName: '',
                stepNo: '',
                add: 'true'
              })
            } else {
              if (response.data.response.msg) {
                this.$message.error(response.data.response.msg)
              }
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      //编辑表格数据
      editStepData(info) {
        let param = {
          id: info.id ? info.id : '',
          stepName: info.stepName ? info.stepName : '',
          operateTime: info.operateTime ? info.operateTime : '',
          procId: this.procId,
          procName: this.name,
        }
        this.$Http
          .post("etlProdStepInfo/update", param)
          .then(response => {
            if (response.data.response.code == "1") {
              this.$message.success('编辑成功~')
              this.setShowEditInit()
              this.getStepData()
            } else {
              if (response.data.response.msg) {
                this.$message.error(response.data.response.msg)
              }
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      changeName(row) {
        this.editStepData(row)
      },
      // 初始化单元格显示状态
      setShowEditInit() {
        this.showStepName.map((item, index) => {
          this.showStepName[index] = false
        })
        this.showOperateTime.map((item, index) => {
          this.showOperateTime[index] = false
        })
      },
      //单击单元格事件
      editable(row, column, cell, event, index) {
        this.setShowEditInit()
        let nowObj = column.property
        var index = this.tableData.findIndex((item) => {
          return item.id === row.id
        })
        if (nowObj == 'stepName') {
          this.showStepName[index] = true
          this.$set(this.showStepName, index, true)
        } else if (nowObj == 'operateTime') {
          this.showOperateTime[index] = true
          this.$set(this.showOperateTime, index, true)
        }
      },
      //点击添加步骤
      add(row) {
        if (!row.stepName) {
          this.$message.error('请输入步骤描述')
        } else {
          let param = {
            id: '',
            stepName: row.stepName,
            procId: this.procId,
            procName: this.name,
            operateTime: ''
          }
          this.$Http
            .post("etlProdStepInfo/save", param)
            .then(response => {
              if (response.data.response.code == "1") {
                this.$message.success('新增成功~')
                this.setShowEditInit()
                this.getStepData()
              } else {
                if (response.data.response.msg) {
                  this.$message.error(response.data.response.msg)
                }
              }
            })
            .catch(error => {
              console.log(error);
            });
        }
      },
      //点击删除步骤
      reduce(row) {
        this.$confirm('确认删除此条步骤吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$Http
            .get("etlProdStepInfo/delete/" + row.id)
            .then(response => {
              if (response.data.response.code == "1") {
                this.$message.success('删除成功~')
                this.setShowEditInit()
                this.getStepData()
              } else {
                if (response.data.response.msg) {
                  this.$message.error(response.data.response.msg)
                }
              }
            })
            .catch(error => {
              console.log(error);
            });
        }).catch(() => {

        });
      },
      // 上移 下移
      moveNode(node, type) {
        if (type === 'up') {
          if (node.$index == 0) {
            this.$message.warning('当前已为表格最顶层，不可再上移')
            return false
          }
        } else if (type === 'down') {
          if (node.$index == this.tableData.length - 2) {
            this.$message.warning('当前已为表格最底层，不可再下移')
            return false
          }
        }

        let param = {
          procId: this.procId,
          stepNo: node.row.stepNo,
          direction: type == 'up' ? 1 : 2,
          id: node.row.id
        }
        this.$Http
          .post("etlProdStepInfo/exchangeListStepInfo", param)
          .then(response => {
            if (response.data.response.code == "1") {
              this.$message.success(`${type == 'up' ? '上移' : '下移'}成功`)
              this.setShowEditInit()
              this.getStepData()
            } else {
              if (response.data.response.msg) {
                this.$message.error(response.data.response.msg)
              }
            }
          })
          .catch(error => {
            console.log(error);
          });
      }
    },
    destroyed() {}
  };
</script>

<style scoped lang="scss">
  .step-list {
    padding: 10px;
    box-sizing: border-box;

    .oneTouch {
      margin-right: 25px;
    }

    .content {
      .table {
        margin-top: 30px;

        .detail-column {
          color: #1846BC
        }
      }
    }
  }
</style>
